<template>
  <el-card class="container-sensor">
    <div class="title">节点状态列表</div>

    <!-- <el-divider /> -->
    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange"
      border
      v-loading="loading"
    >
      <el-table-column
        v-for="(option, index) in options"
        :key="index"
        :label="option.label"
        :prop="option.prop"
        :width="option.width"
        align="center"
      >
        <template v-slot="{ row }" v-if="option.prop === 'status'">
          <!-- <el-tooltip :content="'status: ' + row.status" placement="top"> -->
          <el-switch
            v-model="row.status"
            inline-prompt
            :inactive-value="2"
            :active-value="1"
            active-text="1"
            inactive-text="2"
          />
          <!-- </el-tooltip> -->
        </template>
      </el-table-column>
    </el-table>
    <Dialog
      v-model="dialogTableVisible"
      :currentNodeResource="currentNodeResource"
      :dialogTableValue="dialogTableValue"
    />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { options } from './options'
import { getNodeList, getNodeResourceList } from '@/api/facility.js'
import { ElMessage } from 'element-plus'
import Dialog from './components/dialog.vue'

const loading = ref(true)

const dialogTableValue = ref('')

const currentNodeResource = ref([])

const dialogTableVisible = ref(false)

const tableData = ref([])

const handleCurrentChange = async (currentRow, oldCurrentRow) => {
  const res = await getNodeResourceList(currentRow.mac)
  currentNodeResource.value = res.data
  dialogTableVisible.value = true
  dialogTableValue.value = currentRow.mac
  // console.log(currentRow)
}

const initTableList = async () => {
  try {
    const res = await getNodeList()
    loading.value = false
    tableData.value = res.data
    // console.log(res.data)
  } catch (error) {
    ElMessage.error(error)
  }
}

initTableList()
</script>

<style lang="scss" scoped>
.container-sensor {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  .title {
    margin-bottom: 15px;
  }
}
</style>
